<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="请选择频道" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="channelId">
              <j-tree-select
                ref="treeSelect"
                placeholder="请选择频道"
                v-model="model.channelId"
                dict="mk_shop_channel,name,id"
                pidValue="0"
                pid-field="parent_id"
                multiple
                :condition="condition"
              ></j-tree-select>
            </a-form-model-item>

          </a-col>
         <!-- <a-col :span="24">
            &lt;!&ndash;            <a-form-model-item label="店铺ID" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shopId">&ndash;&gt;
            &lt;!&ndash;              <j-dict-select-tag type="list" v-model="model.shopId" placeholder="请输入店铺ID"  dictCode="mk_shop_basic,name,id" ></j-dict-select-tag>&ndash;&gt;
            &lt;!&ndash;            </a-form-model-item>&ndash;&gt;
            <a-form-model-item label="所属门店" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="shopId">
              <a-select type="list_multi" v-model="model.shopId" dictCode="" placeholder="请选择所属门店" >
                <a-select-option v-for="(i, k) in shopList" :key="i.id">
                  {{i.name}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>-->
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

    import { httpAction, getAction } from '@/api/manage'
    import store from '@/store'
    import { validateDuplicateValue } from '@/utils/util'

    export default {
        name: 'ShopChannelshopForm',
        components: {},
        props: {
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        data() {
            return {
                shopList: [],
                model: {},
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
                confirmLoading: false,
                validatorRules: {
                    channelId:  [
                        { required: true, message: '请选择频道!' },
                    ],
                },
                url: {
                    add: '/shop/shopChannelshop/add',
                    edit: '/shop/shopChannelshop/edit',
                    queryById: '/shop/shopChannelshop/queryById',
                    getShopListUrl: '/shop/shopBasic/selectShopList'
                }
            }
        },
        computed: {
            formDisabled() {
                return this.disabled
            },
            condition() {
                if (store.getters.userInfoSite) {
                    return `{"site_id": "${store.getters.userInfoSite.id}"}`
                } else { return '{}' }
            }
        },
        created() {
            //备份model原始值
            this.modelDefault = JSON.parse(JSON.stringify(this.model))
        },
        methods: {
            getShopListUrl() {
                this.shopList = []
                getAction(this.url.getShopListUrl).then(res => {
                    if (res.success) {
                        let result = res.result
                        result.forEach((e) => {
                            this.shopList.push(e)
                        })
                    }
                })
                console.log(this.shopList)

            },
            add() {
                this.edit(this.modelDefault)
            },
            edit(record) {
                  this.getShopListUrl();
                this.model = Object.assign({}, record)
                this.visible = true
            },
            submitForm() {
                const that = this
                // 触发表单验证
                this.$refs.form.validate(valid => {
                    if (valid) {
                        that.confirmLoading = true
                        let httpurl = ''
                        let method = ''
                        if (!this.model.id) {
                            httpurl += this.url.add
                            method = 'post'
                        } else {
                            httpurl += this.url.edit
                            method = 'put'
                        }
                        httpAction(httpurl, this.model, method).then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.$emit('ok')
                            } else {
                                that.$message.warning(res.message)
                            }
                        }).finally(() => {
                            that.confirmLoading = false
                        })
                    }

                })
            },
        }
    }
</script>